<template>
  <div class="monitor-center">
    <div class="page-left">
      <div>
        <div class="fleet-list">车组列表</div>
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          ref="tree"
          @node-click="toggleCheckedStatus"
          @check-change="handleCheckChange"
          @node-contextmenu="handleFleetContextmenu"
        >
          <span
            class="custom-tree-node"
            slot-scope="{ node, data }"
            :style="{ color: data.status === 'important' ? 'red' : 'inherit' }"
          >
            <i :class="data.icon"></i>
            <span>{{ data.label }}</span>
            <span>({{ data.number }})</span>
          </span>
        </el-tree>

        <ul class="fleet-contextmenu contextmenu" ref="Fleet">
          <li @click="bindArea">绑定省市区</li>
          <li @click="transSetting">无线回传设置</li>
          <li @click="speedSetting">超速设置</li>
        </ul>
      </div>
      <div>
        <el-input
          v-model="keyword"
          size="mini"
          placeholder="输入车组名/车牌号/设备号/SIM号/车主名"
        ></el-input>
        <ul class="status-menu">
          <li
            :class="{ 'status-active': filterStatus === 'all' }"
            @click="filterStatus = 'all'"
          >
            全部({{ carList.all.length }})
          </li>
          <li
            :class="{ 'status-active': filterStatus === 'online' }"
            @click="filterStatus = 'online'"
          >
            在线(0)
          </li>
          <li
            :class="{ 'status-active': filterStatus === 'offline' }"
            @click="filterStatus = 'offline'"
          >
            离线({{ carList.offline.length }})
          </li>
        </ul>

        <ul class="car-list">
          <li
            v-for="(item, index) in showCarList"
            :key="index"
            @click="showCarContent(item)"
            :class="{ current: currentCode === item.code }"
            @contextmenu="handleCarContextMenu"
          >
            {{ item.code }}

            <el-popover
              placement="bottom-start"
              width="200"
              trigger="click"
              popper-class="set-menu-popover"
            >
              <span class="setting-icon" slot="reference"
                ><i class="el-icon-s-tools"></i
              ></span>
              <ul class="set-menu">
                <li @click="checkMessage">查看资料</li>
                <li @click="showDisPatchIssue">调度下发</li>
                <li @click="transSetting">无线回传设置</li>
                <li @click="openSettleDialog">结清</li>
                <li>查流量</li>
              </ul>
            </el-popover>

            <span>[离线{{ item.offlineDays }}天]</span>
          </li>
        </ul>

        <ul class="car-contextmenu contextmenu" ref="car">
          <li style="color: red;">关注度设置</li>
          <li @click="openAttentionNote">高</li>
          <li @click="openAttentionNote">中</li>
          <li @click="openAttentionNote">低</li>
          <li @click="openAttentionNote">修改备注</li>
          <li @click="removeAttention">清除关注</li>
        </ul>
      </div>
    </div>
    <div class="page-right">
      <map-display ref="MapDisplay"></map-display>
    </div>

    <bind-area ref="BindArea"></bind-area>
    <wifi-trans ref="WifiTrans"></wifi-trans>
    <speed-setting ref="SpeedSetting"></speed-setting>
    <attention-note ref="AttentionNote"></attention-note>
    <check-message ref="CheckMessage"></check-message>
    <dispatch-issue ref="DisPatchIssue"></dispatch-issue>
    <settle-dialog ref="SettleDialog"></settle-dialog>
  </div>
</template>

<script>
import user from "@/store/modules/user";
import MapDisplay from "./map-display.vue";
import BindArea from "./bind-area.vue";
import WifiTrans from "./wifi-trans.vue";
import SpeedSetting from "./speed-setting.vue";
import AttentionNote from "./attention-note.vue";
import CheckMessage from "./check-message.vue";
import DispatchIssue from "./dispatch-issue.vue";
import SettleDialog from "./settle-dialog.vue";

export default {
  name: "MonitorCenter",

  components: {
    MapDisplay,
    BindArea,
    WifiTrans,
    SpeedSetting,
    AttentionNote,
    CheckMessage,
    DispatchIssue,
    SettleDialog
  },

  data() {
    return {

      currentCode: null,
      mousePosition: [],
      carList: {
        all: [],
        online: [],
        offline: []
      },
      showCarList: [],

      popItems: [
        {
          class: "fa fa-wrench",
          txt: "处理异常"
        },
        {
          class: "fa fa-check",
          txt: "已解决"
        },
        {
          class: "fa fa-ban",
          txt: "已忽略"
        }
      ],

      
      keyword: "",
      filterStatus: "all",
      treeData: [
        {
          id: 1,
          label: "重点关注",
          number: 0,
          status: "important"
        },
        {
          id: 2,
          label: "无线设备追车组",
          number: 0,
          status: "important"
        },
        {
          id: 3,
          label: "至尊宝888",
          number: 1
        }
      ]
    };
  },

  methods: {
    

    toggleCheckedStatus(data, node) {
      this.$refs.tree.setChecked(data.id, !node.checked, true);
    },

    handleCheckChange(data, bool) {
      if (data.id == 3 && bool) {
        this.carList = JSON.parse(localStorage.getItem("user"));
      } else if (data.id == 3 && !bool) {
        this.carList = {
          offline: [],
          all: [],
          online: []
        };
      }
      this.showCarList = this.carList[this.filterStatus];
    },

    showCarContent(item) {
      this.currentCode = item.code;
      // this.$refs.MapDisplay.showCar(item);
    },

    list_item_click(it) {
      switch (it) {
        case 0:
          alert("第一项被点击");
          break;
        case 1:
          alert("第二项被点击");
          break;
      }
    },

    hiddenFleetMenu() {
      this.$refs.Fleet.style = "";
      this.$refs.car.style = "";
      document.body.removeEventListener("click", this.handleFleetContextmenu);
    },

    handleFleetContextmenu(e, data) {
      e.preventDefault();
      this.$refs.Fleet.style = `left: ${e.clientX + 10}px;top: ${e.clientY +
        10}px`;
      document.body.addEventListener("click", this.hiddenFleetMenu);
    },

    bindArea() {
      this.hiddenFleetMenu();
      this.$refs.BindArea.show();
    },

    transSetting() {
      this.hiddenFleetMenu();
      this.$refs.WifiTrans.show();
    },

    speedSetting() {
      this.hiddenFleetMenu();
      this.$refs.SpeedSetting.show();
    },

    //左下角右键菜单展示
    handleCarContextMenu(e) {
      e.preventDefault();
      this.$refs.car.style = `left: ${e.clientX + 10}px;top: ${e.clientY +
        10}px`;
      document.body.addEventListener("click", this.hiddenFleetMenu);
    },

    //打开修改备注弹窗
    openAttentionNote() {
      this.$refs.AttentionNote.show();
    },

    removeAttention() {
      this.$message.success("删除成功");
    },

    //查看资料
    checkMessage() {
      this.$refs.CheckMessage.show();
    },

    showDisPatchIssue() {
      this.$refs.DisPatchIssue.show();
    },

    openSettleDialog() {
      this.$refs.SettleDialog.show();
    }
  },

  created() {
    let data = {
      offline: [
        {
          code: "14020843471",
          offline: true,
          offlineDays: 21,
          point: {
            lng: 103.989825,
            lat: 30.640199
          }
        }
      ],
      all: [
        {
          code: "14020843471",
          offline: true,
          offlineDays: 21,
          point: {
            lng: 103.989825,
            lat: 30.640199
          }
        }
      ],
      online: []
    };
    localStorage.setItem("user", JSON.stringify(data));
  },

  watch: {
    
  }
};
</script>

<style lang="scss">
.monitor-center {
  display: flex;
  height: 100%;
  .page-left {
    flex: 0 0 300px;
    height: 100%;
    border-right: 1px solid #e6e6e6;

    > div {
      border-bottom: 1px solid #e6e6e6;
      &:first-child {
        height: 35%;
      }
      &:nth-child(2) {
        height: 65%;

        .el-input {
          margin: 10px;
          width: calc(100% - 20px);
        }
      }
    }

    .fleet-list {
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid #e6e6e6;
      padding: 0 15px;
      background-color: #f9f9f9;
      font-size: 15px;
      font-weight: bold;
      color: rgb(85, 85, 85);
    }

    .car-list {
      li {
        font-size: 13px;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        cursor: pointer;

        &:hover {
          background: #f7f7f7;
        }

        span {
          float: right;
        }

        .setting-icon {
          margin: 0 15px;
        }

        &.current {
          background: #bcddf9;
        }
      }
    }
  }

  .page-right {
    flex: 1;
    height: 100%;
  }

  .el-tree {
    padding-top: 10px;
    .custom-tree-node {
      font-size: 13px;
    }
  }

  .status-menu {
    height: 30px;
    display: flex;
    align-items: center;

    > li {
      flex: 1;
      line-height: 30px;
      text-align: center;
      background-color: #e0e0e0;
      height: 100%;
      font-size: 13px;
      cursor: pointer;

      &.status-active {
        color: white;
        background-color: #479de6;
      }
    }
  }

  .contextmenu {
    position: fixed;
    top: -1000px;
    left: 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 30000;

    li {
      height: 40px;
      line-height: 40px;
      background: white;
      padding: 5px 10px;
      font-size: 13px;
      border-bottom: 1px solid #e6e6e6;

      &:hover {
        background: #e6e6e6;
        cursor: pointer;
      }
    }
  }
}

.set-menu-popover {
  width: 150px !important;

  .set-menu {
    li {
      height: 30px;
      line-height: 30px;
      background: white;
      padding: 0px 10px;
      font-size: 13px;
      border-radius: 5px;
      // border-bottom: 1px solid #e6e6e6;

      &:hover {
        background: #bcddf9;
        cursor: pointer;
      }
    }
  }
}
</style>
